<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #2c3e50;
            padding: 15px 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .navbar a,
        .navbar button {
            color: white;
            text-decoration: none;
            padding: 12px 18px;
            margin: 0 8px;
            border: none;
            background-color: #34495e;
            border-radius: 6px;
            transition: background-color 0.3s, transform 0.2s;
            cursor: pointer;
        }

        .navbar a:hover,
        .navbar button:hover {
            background-color: #1abc9c;
            transform: scale(1.05);
        }

        .search-box {
            display: flex;
            align-items: center;
            background: white;
            padding: 5px;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .search-box input[type="text"] {
            border: none;
            outline: none;
            padding: 8px;
            font-size: 16px;
            border-radius: 4px;
        }

        .search-box button {
            background-color: #1abc9c;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .search-box button:hover {
            background-color: #16a085;
        }
    </style>
</head>

<body>
    <nav class="navbar">
        <div>
            <a href="#home">首页</a>
            <a href="#forum">论坛问答</a>
            <a href="#ask">发布问答</a>
        </div>
        <div class="search-box">
            <input type="text" placeholder="搜索...">
            <button type="button">搜索</button>
        </div>
        <div>
            <button onclick="window.location.href='#login'">登录</button>
            <button onclick="window.location.href='#register'">注册</button>
            <button id="emailBtn" onclick="get_email()">获取验证码</button>
        </div>
    </nav>

    <script>
        let canSend = true;

        function get_email() {
            if (!canSend) {
                alert("请等待60秒后再尝试发送邮件");
                return;
            }

            fetch('http://127.0.0.1:4000/email')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('请求过快，请稍后再试');
                    }
                    return response.json();
                })
                .then(data => {
                    alert(data.message);
                    let btn = document.getElementById("emailBtn");
                    btn.disabled = true;
                    canSend = false;
                    let count = 60;
                    let timer = setInterval(() => {
                        btn.innerText = `请等待 ${count--} 秒`;
                        if (count < 0) {
                            clearInterval(timer);
                            btn.innerText = "获取验证码";
                            btn.disabled = false;
                            canSend = true;
                        }
                    }, 1000);
                })
                .catch(error => {
                    alert("发送失败，请稍后再试");
                });
        }
    </script>

    {% block content %}{% endblock %}
</body>
</html>
